//所有函数
//求和，计算百分比（画饼图时需要）
function sumFunc(data) {
    var sum = 0;
    for (var i = 0, len = data.length; i < len; i++) {
        sum += data[i];
    }
    return sum;
}
//饼状函数
function pieChart(elem, data) {
    if (elem.getContext) {
        var ctx = elem.getContext("2d"),
            vdata = data.values, //绘图数据
            sum = sumFunc(vdata), //对绘图数据求和，用于计算百分比
            startangle = 0, //绘制扇形的开始角度
            labels = data.labels, //绘图的对应文字
            x = data.x, //圆心x坐标
            y = data.y, //圆心y坐标
            rad = data.radius, //圆半径
            x1 = x + rad + 30, //绘制右侧文字和标注的x坐标
            y1 = y + rad - 60, //绘制右侧文字和标注的y坐标
            endangle; //绘制扇形的结束角度
        ctx.clearRect(0, 0, 375, 250);
        for (var i = 0, len = vdata.length; i < len; i++) {
            //绘制饼图
            //计算下一次绘制扇形的结束角度，即根据绘制数据占有总数据和的比例求的弧度
            var percent = vdata[i] / sum;
            endangle = startangle + Math.PI * 2 * (percent);
            ctx.beginPath(); //开始绘制新路径
            ctx.fillStyle = data.colors[i]; //绘制颜色
            ctx.moveTo(x, y); //移动到圆心(注：画饼图一定要回到圆心，不然会有问题)
            ctx.arc(x, y, rad, startangle, endangle, false); //画扇形
            //绘制右侧文字和标注
            ctx.moveTo(x1, y1); //移动到绘制文字和标注的位置
            ctx.fillRect(x1, y1, 30, 14); //绘制矩形表示比列图
            //计算四舍五入后的扇形每份的百分比
            var perc = (percent * 100).toFixed(2) + "%"; //tofixed()自动四舍五入返回指定小数位数的字符串
            //设置绘制文字的属性
            ctx.font = "bold 12px microsoft yahei";
            ctx.txtalgin = "center";
            ctx.textBaseline = "top";
            //绘制文字
            ctx.fillText(labels[i] + ":" + perc, x1 + 35, y1);
            ctx.fill(); //指定颜色填充以上绘制

            startangle = endangle; //下一次绘制扇形的开始角度
            y1 += 20; //下一次绘制文字和标注的y坐标
        }
    }
}
function sub(userId, id) {
    $.ajax({
        type: 'post',
        url: 'http://app.scjapp.com:8088/cuotigou/wrongTopic/analysie',
        data: {
            userId: userId,
            id: id
        },
        success: function (data) {
            // 饼状图// 饼状图// 饼状图// 饼状图// 饼状图// 饼状图// 饼状图// 饼状图// 饼状图// 饼状图// 饼状图// 饼状图
            //饼状图 1
            var datasets4 = {
                colors: [], //颜色
                labels: [], //标签
                values: [], //值
                x: 115, //圆心x坐标
                y: 115, //圆心y坐标
                radius: 100 //半径
            };
            var pie = document.getElementById("entry"),
                datasets = {
                    colors: ["#3879df", "#00ccf7"], //颜色
                    labels: ["已掌握", "未掌握"], //标签
                    values: [data.record.masterCount, data.record.notMasterCount], //值
                    x: 115, //圆心x坐标
                    y: 115, //圆心y坐标
                    radius: 100 //半径
                };
            pieChart(pie, datasets);
            //饼状图 2
            var pie2 = document.getElementById("noStudy"),
                datasets2 = {
                    colors: ["#f0ee1d", "#f93395", "#4f81be", "#00b2f2", "#33cc33","33bb33","4f89ce","#62d5c8","#1e90e2"], //颜色
                    labels: data.questionType, //标签
                    values: data.questionTypeCount, //值
                    x: 115, //圆心x坐标
                    y: 115, //圆心y坐标
                    radius: 100 //半径
                };
            pieChart(pie2, datasets2);
            $('#noStudy_table1').empty();
            for (var i = 0, len = data.questionNotMaster.length; i < len; i++) {
                $('#noStudy_table1').append(
                    ` <tr>
                              <td>${data.questionNotMaster[i].title}</td>
                              <td>${data.questionNotMaster[i].count}</td>
                          </tr>
                      `
                );
            }
            //饼状图 3
            var pie3 = document.getElementById("noStudyClass"),
                datasets3 = {
                    colors: ["#f0ee1d", "#f93395", "#4f81be", "#00b2f2", "#33cc33","33bb33","4f89ce","#62d5c8","#1e90e2"], //颜色
                    labels: data.subjects, //标签
                    values: data.subjectCount, //值
                    x: 115, //圆心x坐标
                    y: 115, //圆心y坐标
                    radius: 100 //半径
                };
            pieChart(pie3, datasets3);
            // 科目知识点未掌握情况表格
            $('#noStudy_table2').empty();
            for (var i = 0, len = data.subjectNotMaster.length; i < len; i++) {
                $('#noStudy_table2').append(
                    ` <tr>
                              <td>${data.subjectNotMaster[i].title}</td>
                              <td>${data.subjectNotMaster[i].count}</td>
                          </tr>
                      `
                )
            }
            // 折线图/柱状图 // 折线图/柱状图 // 折线图/柱状图 // 折线图/柱状图 // 折线图/柱状图 // 折线图/柱状图
            var error_subject = document.getElementById("error_subject");
            var entry_month = document.getElementById("entry_month");
            var myChart1 = echarts.init(error_subject);
            var myChart2 = echarts.init(entry_month);
            var myChart3 = echarts.init(error_pro);
            var app = {};
            option1 = null;
            option2 = null;
            option3 = null;
            var obj = {
                "charts": data.month,
                "errorPro": data.reason
            };
            option1 = {
                xAxis: {
                    type: 'category',
                    data: data.title,
                    axisLine: {
                        lineStyle: {
                            color: '#02baab',
                        }
                    },
                    axisTick: {
                        length: '2'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#02baab'
                        }
                    },
                    axisTick: {
                        length: '0'
                    }

                },
                series: [{
                    data: data.masterCount,
                    type: 'line',
                    lineStyle: {
                        color: '#00ccf7'
                    },
                    name: '已掌握'

                },
                    {
                        data: data.notMasterCount,
                        type: 'line',
                        lineStyle: {
                            color: '#ee807c'
                        }
                    },
                ]
            };
            option2 = {
                xAxis: {
                    type: 'category',
                    data: Object.keys(obj.charts),
                    axisLine: {
                        lineStyle: {
                            color: '#02baab'
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#02baab'
                        }
                    },
                },
                series: [{
                    data: Object.keys(obj.charts).map(function (key) {
                        return obj.charts[key];
                    }),
                    label: {
                        normal: {
                            position: 'top',
                            show: true
                        }
                    },
                    type: 'bar',
                    itemStyle: {
                        color: '#f900ff'
                    },
                }]
            };
            option3 = {
                xAxis: {
                    type: 'category',
                    data: Object.keys(obj.errorPro),

                    axisLine: {
                        lineStyle: {
                            color: '#02baab'
                        },
                        show: false,
                    },
                    axisTick: {
                        show: false,
                        interval: 0,

                    },
                    axisLabel: {
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {

                        show: false
                    },
                    axisTick: {
                        show: false,

                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    // data: [10, 9, 5, 7, 8, 4, 9,10,6,8,9,10],
                    data: Object.keys(obj.errorPro).map(function (key) {
                        return obj.errorPro[key];
                    }),
                    label: {
                        normal: {
                            position: 'top',
                            show: true
                        }
                    },
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ["#3069d4", "#46d32d",
                                    "#d3d531", "#d77b2e", "#c21820"
                                ];
                                return colorList[params.dataIndex]
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }
                    },
                }]
            };
            if (option1 && typeof option1 === "object") {
                myChart1.setOption(option1, true);
            }
            if (option2 && typeof option2 === "object") {
                myChart2.setOption(option2, true);
            }
            if (option3 && typeof option3 === "object") {
                myChart3.setOption(option3, true);
            }
        }
    })
}

$(function () {
    var yincang = $('#yincang').val();
    $.ajax({
        type: 'post',
        url: 'http://app.scjapp.com:8088/cuotigou/wrongTopic/analysie',
        data: {
            userId: yincang,
              id: 0
        },
        success: function (data) {
            sub(yincang, data.subject[0].id);
            //   科目列表
            for (var i = 0, len = data.subject.length; i < len; i++) {
                $('#subject').append(
                    ` <li id="${data.subject[i].id}">${data.subject[i].title}</li>
                      `
                );
            }
            $('#subject li:first').addClass('tabhover');
            $("ul#subject").on("click", "li", function () {
                $(this).addClass('tabhover').siblings('li').removeClass('tabhover');
                sub(yincang, $(this).context.id);
            });
        }
    })
})



// 手机适配
var entry1=document.getElementById('entry');
var error_subject1=document.getElementById('error_subject');
var entry_month1=document.getElementById('entry_month');
var noStudy1=document.getElementById('noStudy');
var noStudyClass1=document.getElementById('noStudyClass');
var error_pro1=document.getElementById('error_pro');

var ua=navigator.userAgent;
var system={
    win:false,
    mac:false,
    x11:false,
    //mobile
    iphone:false,
    ipad:false,
    ios:false,
    android:false,
    winMobile:false
};

//
var p=navigator.platform;
system.win=p.indexOf('Win')==0;
system.mac=p.indexOf('Mac')==0;
system.x11=(p=='x11')||(p.indexOf('Linux')==0);

system.iphone=ua.indexOf('iPhone')>-1;
system.ipad=ua.indexOf('iPad')>-1;
system.android=ua.indexOf('Android')>-1;

function getViewPort(){
    var viewHeight=window.innerHeight||document.documentElement.clientHeight;
    var viewWidth=window.innerWidth||document.documentElement.clientWidth;
    console.log(viewHeight,viewWidth);
    if(system.iphone){
        document.body.style.width=viewWidth;
        entry1.width=viewWidth;
        entry1.height=250;
        error_subject1.width=viewWidth;
        error_subject1.height=250;
        entry_month1.width=viewWidth;
        entry_month1.height=250;
        noStudy1.width=viewWidth;
        noStudy1.height=250;
        noStudyClass1.width=viewWidth;
        noStudyClass1.height=250;
        error_pro1.width=viewWidth;
        error_pro1.height=250;
    }
    else if(system.android){
        document.body.style.width=viewWidth;
        entry1.width=viewWidth;
        entry1.height=250;
        error_subject1.width=viewWidth;
        error_subject1.height=250;
        entry_month1.width=viewWidth;
        entry_month1.height=250;
        noStudy1.width=viewWidth;
        noStudy1.height=250;
        noStudyClass1.width=viewWidth;
        noStudyClass1.height=250;
        error_pro1.width=viewWidth;
        error_pro1.height=250;
    }
}

getViewPort();
